<template>
  <div class="updateimg">
    <Header>
      <a
        href="javascript:;"
        slot="logo"
        @click="gobackClickHandle"
        class="goback"
      >
        <i class="icon-arrow-left-bold"></i>
      </a>
      <span slot="title" class="updateimg_header_title">{{
        $t('lang["' + $route.meta.title + '"]')
      }}</span>
      <a
        href="javascript:;"
        slot="rightMenu"
        @click="uploadImgClickHandle"
        class="sendupload"
        ><i class="icon-select"></i
      ></a>
    </Header>
    <div class="updateimg_main">
      <van-uploader
        v-model="fileList"
        :max-size="800 * 800"
        @oversize="onOversize"
        :after-read="afterRead"
        :before-read="beforeRead"
      />
      <van-divider>{{ $t("lang.图片样式") }}</van-divider>
      <div class="updateimg_main_imgstyles">
        <div class="updateimg_main_imgstyles_content">
          <div class="updateimg_main_imgstyles_item">
            <van-image fit="contain" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          </div>
          <div class="updateimg_main_imgstyles_item">
            <van-image fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          </div>
          <div class="updateimg_main_imgstyles_item">
            <van-image fit="none" src="https://img.yzcdn.cn/vant/cat.jpeg" />
          </div>
        </div>
        <div class="updateimg_main_imgstyles_bottom">
          <van-radio-group v-model="radio">
            <van-radio name="contain">contain</van-radio>
            <van-radio name="cover">cover</van-radio>
            <van-radio name="none">none</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="updateimg_main_content">
        <label
          ><i>{{ $t("lang.介绍") }}：</i
          ><textarea
            class="updateimg_main_content_text"
            maxlength="200"
            v-model="desc"
          ></textarea
          ><span>{{ current }}/{{ total }}</span></label
        >
      </div>
      <div class="updateimg_main_tags">
        <label
          ><i>{{ $t("lang.标签") }}:</i>
          <div class="updateimg_main_tags_list">
            <Tags :items="tags" :isClose="isClose"></Tags></div
        ></label>
      </div>
      <van-divider>{{ $t("lang.高级设置") }}</van-divider>
      <div class="updateimg_main_aside">
        <van-checkbox
          v-model="isProhibitComment"
          class="updateimg_main_aside_item"
          >{{ $t("lang.屏蔽评论") }}</van-checkbox
        >
        <van-checkbox
          v-model="isProhibitShare"
          class="updateimg_main_aside_item"
          >{{ $t("lang.屏蔽分享") }}</van-checkbox
        >
      </div>
      <van-divider>{{ $t("lang.其他相关") }}</van-divider>
      <div class="updateimg_main_aside" v-if="$store.state.user.isEnterprise">
        <CheckboxGroup
          :title="checkboxGroupTitle"
          :parentIsAd="isAd"
          @updateIsAd="updateIsAd"
        >
          <div slot="checkboxGroupContent" slot-scope="{ isDisabled }">
            <FormInput
              :title="$t('lang.链接')"
              :placeholder="$t('lang.填写广告链接地址')"
              :adUrl="adUrl"
              @updateValue="updateAdUrl"
              :disabled="isDisabled"
            ></FormInput>
            <FormInput
              :title="$t('lang.说明')"
              :placeholder="$t('lang.填写广告说明')"
              :adUrl="adDesc"
              @updateValue="updateAdDesc"
              :disabled="isDisabled"
            ></FormInput>
          </div>
        </CheckboxGroup>
        <CheckboxGroup
          :title="checkboxGroupGoodsTitle"
          :parentIsAd="isAd"
          @updateIsAd="updateIsAd"
        >
          <div slot="checkboxGroupContent" slot-scope="{ isDisabled }">
            <FormInput
              :title="$t('lang.链接')"
              :placeholder="$t('lang.填写商品链接地址')"
              :adUrl="adUrl"
              @updateValue="updateAdUrl"
              :disabled="isDisabled"
            ></FormInput>
            <FormInput
              :title="$t('lang.标题')"
              :placeholder="$t('lang.填写商品标题')"
              :adUrl="adDesc"
              @updateValue="updateAdDesc"
              :disabled="isDisabled"
            ></FormInput>
            <FormInput
              :title="$t('lang.原价')"
              :placeholder="$t('lang.填写商品原价')"
              :adUrl="adDesc"
              @updateValue="updateAdDesc"
              :disabled="isDisabled"
            ></FormInput>
            <FormInput
              :title="$t('lang.优惠价')"
              :placeholder="$t('lang.填写商品优惠价')"
              :adUrl="adDesc"
              @updateValue="updateAdDesc"
              :disabled="isDisabled"
            ></FormInput>
          </div>
        </CheckboxGroup>
      </div>
      <div v-else class="updateimg_main_aside">
        <span class="updateimg_main_aside_nodata">{{ $t("lang.暂无") }}</span>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { Uploader, Toast } from "vant";
export default {
  name: "UpdateImg",
  components: {
    Header: () =>
      import(/* webpackChunkName: "header" */ "../components/header"),
    Footer: () =>
      import(/* webpackChunkName: "footer" */ "../components/footer"),
    FooterNav: () =>
      import(/* webpackChunkName: "footerNav" */ "../components/footerNav"),
    Tags: () =>
      import(/* webpackChunkName:"tags" */ "../components/common/tags.vue"),
    CheckboxGroup: () =>
      import(
        /* webpackChunkName:"checkboxGroup" */ "../components/common/checkboxGroup.vue"
      ),
    FormInput: () =>
      import(
        /* webpackChunkName:"formInput" */ "../components/common/formInput.vue"
      ),
  },
  data() {
    return {
      fileList: [],
      current: 0,
      total: 200,
      desc: "",
      tags: [],
      isAd: false,
      adUrl: "",
      adDesc: "",
      checkboxGroupTitle: this.$t("lang.广告"),
      checkboxGroupGoodsTitle: this.$t("lang.商品"),
      isClose: true,
      isProhibitComment: false,
      isProhibitShare: false,
      radioValue: "",
      radio: "contain",
    };
  },
  created() {
    this.tags.length < 1 && this.tags.push(this.$store.state.user.nickName);
  },
  watch: {
    desc(v) {
      this.current = this.desc.length;
    },
  },
  methods: {
    updateIsAd(v) {
      this.isAd = v;
    },
    updateAdUrl(v) {
      this.adUrl = v;
    },
    updateAdDesc(v) {
      this.adDesc = v;
    },
    gobackClickHandle(e) {
      this.$router.go(-1);
    },
    async afterRead(file) {
      console.log(file, this.fileList);
      /* let uploadImg = await this.$uploaderImg(file.file);
      console.log(uploadImg); */
    },
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast({ message: "只允许上传jpg/png格式的图片！", position: "bottom" });
        return false;
      }
      return true;
    },
    async uploadImgClickHandle() {
      let uploadImg = await this.$uploaderImg(this.fileList);
      console.log(uploadImg);
    },
    onOversize(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.updateimg {
  padding: 0;
  margin: 0;
  .updateimg_header_title {
    line-height: 45 / @base;
  }
  .updateimg_main {
    margin: 60 / @base 0 0;
    .van-uploader {
      margin: 0 10 / @base;
      .van-uploader__preview {
        margin: 4 / @base;
      }
      .van-uploader__upload {
        margin: 4 / @base;
      }
    }
    .updateimg_main_imgstyles {
      margin: 10 / @base 0 0 5 / @base;
      .updateimg_main_imgstyles_content {
        display: flex;
        .updateimg_main_imgstyles_item {
          border: 1 / @base solid #ccc;
          background-color: #000;
          width: 33.33%;
          margin: 0 5 / @base 0 0;
          height: 100 / @base;
          overflow: hidden;
          .van-image {
            height: 100 / @base;
          }
        }
      }
      .updateimg_main_imgstyles_bottom {
        .van-radio-group {
          display: flex;
          .van-radio {
            width: 33.33%;
            padding: 5 / @base 0 5 / @base 15 / @base;
          }
        }
      }
    }
    .updateimg_main_content {
      margin: 20 / @base 15 / @base 15 / @base;
      text-align: left;
      label {
        i {
          font-style: normal;
        }
        textarea {
          &.updateimg_main_content_text {
            display: block;
            width: 320 / @base;
            height: 200 / @base;
            font-size: 14 / @base;
            border: 1 / @base solid #efefef;
            margin: 10 / @base 0 0;
            padding: 10 / @base;
            border-radius: 5 / @base;
          }
        }
        span {
          display: block;
          text-align: right;
          font-size: 14 / @base;
          color: #999;
        }
      }
    }
    .updateimg_main_aside {
      margin: 0 20 / @base;
      .updateimg_main_aside_item {
        margin: 0 0 10 / @base 0;
      }
      .updateimg_main_aside_nodata {
        text-align: center;
        color: #ccc;
        padding: 20 / @base 0;
        display: block;
      }
    }
    .updateimg_main_tags {
      margin: 0 10 / @base;
      label {
        display: flex;
        text-align: left;
        padding: 5 / @base 0;
        i {
          display: block;
          width: 50 / @base;
          font-style: normal;
          text-align: right;
          margin: 0 5 / @base 0 0;
          line-height: 30 / @base;
          display: block;
        }
        .updateimg_main_tags_list {
          width: 80%;
        }
      }
    }
  }
  .header {
    .header_left {
      a {
        &.goback {
          width: 24 / @base;
          height: 24 / @base;
          display: block;
          margin: 10 / @base 0 10 / @base 10 / @base;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
    .header_right {
      text-align: right;
      a {
        text-align: right;
        &.sendupload {
          height: 24 / @base;
          display: block;
          margin: 10 / @base;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
  }
}
</style>
